<template>
    <el-dialog id="river-delector"  title="河湖选择" :visible.sync="showRiverSelector" >
        <el-tabs v-model="curTab" @tab-click="switchTab" row-key="id">
            <el-tab-pane label="河流" name="river" :disabled="riverDisabled || initData==='lakes' || initData==='reservoir'">
                <!-- 河流列表 -->
                <el-form :inline="true" :model="riverFilter" ref="filter1" class="demo-form-inline">
                    <el-form-item label="河流名称" prop="name">
                        <el-input v-model="riverFilter.name" placeholder="请输入河流名称" @change="getRiverList"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name">
                        <el-button size="mini" @click="getRiverList(1)">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="riverList.data" ref="riverList" @select-all="onRiverSelectAll" @select="onRiverSelect">
                    <el-table-column type="selection"   width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" width="60px" ></el-table-column>
                    <el-table-column label="河流名称" prop="name" width="" ></el-table-column>
                    <el-table-column label="所属区域" prop="areaName"   width=""></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" 
                    :page-size="riverList.pageSize"
                    :total="riverList.total" 
                    @current-change="getRiverList"
                    @prev-click="getRiverList"
                    @next-click="getRiverList"
                ></el-pagination>
            </el-tab-pane>
            <!-- 湖泊列表 -->
            <el-tab-pane label="湖泊" name="lakes" :disabled="lakesDisabled || reservoirDisabled || initData==='river'">
                <el-form :inline="true" :model="lakesFilter" ref="filter2" class="demo-form-inline">
                    <el-form-item label="湖泊名称" prop="name">
                        <el-input v-model="lakesFilter.name" placeholder="请输入湖泊名称" @change="getLakesList"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name">
                        <el-button size="mini" @click="getLakesList(1)">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="lakesList.data" ref="lakesList" @select-all="onLakesSelectAll" @select="onLakesSelect">
                    <el-table-column type="selection"   width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" width="60px" ></el-table-column>
                    <el-table-column label="湖泊名称" prop="name" width="" ></el-table-column>
                    <el-table-column label="所属区域" prop="ownRegion"   width=""></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" 
                    :page-size="lakesList.pageSize"
                    :total="lakesList.total" 
                    @current-change="getLakesList"
                    @prev-click="getLakesList"
                    @next-click="getLakesList"
                ></el-pagination>
            </el-tab-pane>
             <!-- 水库列表 -->
            <el-tab-pane label="水库" name="reservoir" :disabled="reservoirDisabled || lakesDisabled || initData==='river'">
                <el-form :inline="true" :model="reservoirFilter" ref="filter2" class="demo-form-inline">
                    <el-form-item label="水库名称" prop="name">
                        <el-input v-model="reservoirFilter.name" placeholder="请输入水库名称" @change="getReservoirList"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name">
                        <el-button size="mini" @click="getReservoirList(1)">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="reservoirList.data" ref="reservoirList" @select-all="onReservoirSelectAll" @select="onReservoirSelect">
                    <el-table-column type="selection"   width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" prop="index" width="60px" ></el-table-column>
                    <el-table-column label="水库名称" prop="name" width="" ></el-table-column>
                    <el-table-column label="所属区域" prop="ownRegion"   width=""></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" 
                    :page-size="reservoirList.pageSize"
                    :total="reservoirList.total" 
                    @current-change="getReservoirList"
                    @prev-click="getReservoirList"
                    @next-click="getReservoirList"
                ></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <div class="button-bar">
            <el-button size="small" @click="onCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { debuglog } from 'util';
export default {
    props:{
        initData:{
            type:String,
            default:'',
            require:false
        }
    },
    data(){
        return{
            showRiverSelector:false,
            curTab:'river',
            riverFilter:{
                name:''
            },
            lakesFilter:{
                name:''
            },
            reservoirFilter:{
                name:''
            },
            riverList:{
                pageNum:1,//页码
                pageSize:5,
                total:5,//总共条数
                data:[],
                checked:[]
            },
            lakesList:{
                pageNum:1,//页码
                pageSize:5,
                total:5,//总共条数
                data:[],
                checked:[]
            },
            reservoirList:{
                pageNum:1,//页码
                pageSize:5,
                total:5,//总共条数
                data:[],
                checked:[]
            },
            checked:[],
            riverDisabled:false,
            lakesDisabled:false,
            reservoirDisabled:false,
        }
    },
    watch:{
        initData(newVal){
            this.initTab()
        },
        showRiverSelector(val){

        }


    },
    methods:{
        getRiverList(pageNum){
            var submitData={
                current:typeof pageNum==='number' ? pageNum : this.riverList.pageNum,
                size:this.riverList.pageSize,
                type:'river',
                ...this.riverFilter,
            };
            this.$http.getRiverList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){return}
                this.$set(this.riverList,'pageNum',data.current);
                this.$set(this.riverList,'pageSize',data.size);
                this.$set(this.riverList,'total',data.total);
                this.$set(this.riverList,'data',data.records)

            }).catch((err)=>{
                this.$message.error("请求出错");
                throw("getlistData接口报错：",err)
            })
        },

        getLakesList(pageNum){
            var submitData={
                current:typeof pageNum==='number' ? pageNum : this.lakesList.pageNum,
                size:this.lakesList.pageSize,
                type:'lake',
                ...this.lakesFilter,
            }
            this.$http.getLakesList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){return}
                this.$set(this.lakesList,'pageNum',data.current);
                this.$set(this.lakesList,'pageSize',data.size);
                this.$set(this.lakesList,'total',data.total);
                this.$set(this.lakesList,'data',data.records)

            }).catch((err)=>{
                this.$message.error("请求出错");
                throw("getlistData接口报错：",err)
            })
        },

        getReservoirList(pageNum){
            var submitData={
                current:typeof pageNum==='number' ? pageNum : this.lakesList.pageNum,
                size:this.lakesList.pageSize,
                type:'reservoir',
                ...this.reservoirFilter,
            };
            this.$http.getLakesList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){return}
                this.$set(this.reservoirList,'pageNum',data.current);
                this.$set(this.reservoirList,'pageSize',data.size);
                this.$set(this.reservoirList,'total',data.total);
                this.$set(this.reservoirList,'data',data.records)

            }).catch((err)=>{
                this.$message.error("请求出错");
                throw("getlistData接口报错：",err)
            })
        },

        onConfirm(){
            if(this.curTab==='river'){
                this.$emit("output",this.riverList.checked,'river')
                this.checked=this.riverList.checked
                this.lakesList.checked=[]
                this.reservoirList.checked = []
                this.$refs.lakesList.clearSelection()
            }else if(this.curTab==='lakes'){
                this.$emit("output",this.lakesList.checked,'lake')
                this.checked=this.lakesList.checked
                this.riverList.checked=[]
                this.reservoirList.checked = []
                this.$refs.riverList.clearSelection()
            }else if(this.curTab==='reservoir'){
                this.$emit("output",this.reservoirList.checked,'reservior')
                this.checked=this.reservoirList.checked
                this.riverList.checked=[]
                this.lakesList.checked=[]
                this.$refs.riverList.clearSelection()
            }
            this.showRiverSelector=false

        },

        onCancel(){
            this.showRiverSelector=false
            this.riverList.checked=[]
            this.lakesList.checked=[]
            this.reservoirList.checked = []
        },

        onRiverSelectAll(selection){
            if(selection.length>0){
                this.$message.warning("只能选择一条河流")
                this.$refs.riverList.clearSelection()
            }
        },

        onRiverSelect(selection,row){
            if(selection.length>1){
                this.$refs.riverList.clearSelection()
                this.$refs.riverList.toggleRowSelection(row,true)
            }
            this.riverList.checked=[]
            this.riverList.checked=row
        },

        onLakesSelectAll(selection){
            if(selection.length>0){
                this.$message.warning("只能选择一个湖泊")
                this.$refs.lakesList.clearSelection()
            }
        },

        onLakesSelect(selection,row){
            if(selection.length>1){
                this.$refs.lakesList.clearSelection()
                this.$refs.lakesList.toggleRowSelection(row,true)
            }
            this.lakesList.checked=[]
            this.lakesList.checked=row
        },

        onReservoirSelectAll(selection){
            if(selection.length>0){
                this.$message.warning("只能选择一个水库")
                this.$refs.reservoirList.clearSelection()
            }
        },

        onReservoirSelect(selection,row){
            if(selection.length>1){
                this.$refs.reservoirList.clearSelection()
                this.$refs.reservoirList.toggleRowSelection(row,true)
            }
            this.reservoirList.checked=[]
            this.reservoirList.checked=row
        },

        initTab(){
            if(this.initData==='river'){
                this.riverDisabled=false
                this.reservoirDisabled = false
                this.lakesDisabled=false
                this.curTab='river'
            }else if(this.initData==='lakes'){
                this.riverDisabled=false
                this.lakesDisabled=false
                this.reservoirDisabled = true
                this.curTab='lakes'
            }else if(this.initData==='reservoir'){
                this.riverDisabled = false
                this.lakesDisabled=true
                this.reservoirDisabled=false
                this.curTab='reservoir'
            }else{
                this.riverDisabled=false
                this.lakesDisabled=false
                this.curTab='river'
            }
        },

        switchTab(tab){
            if(tab.name==='river'){
                if(this.riverFilter.name){
                    this.riverFilter.name=''
                    this.getRiverList()
                }
                this.lakesList.checked=[]
                this.$refs.lakesList.clearSelection()
                this.reservoirList.checked=[]
                this.$refs.reservoirList.clearSelection()
            }else if(tab.name==='lakes'){
                if(this.lakesFilter.name){
                    this.lakesFilter.name=''
                    this.getLakesList()
                }
                this.riverList.checked=[]
                this.$refs.riverList.clearSelection()
                this.reservoirList.checked=[]
                this.$refs.reservoirList.clearSelection()
            }else if(tab.name==='reservoir'){
                if(this.reservoirFilter.name){
                    this.reservoirFilter.name=''
                    this.getReservoirList()
                }
                this.riverList.checked=[]
                this.$refs.riverList.clearSelection()
                this.lakesList.checked=[]
                this.$refs.lakesList.clearSelection()
            }
            this.$refs.riverList.toggleRowSelection(this.checked,true)
            this.$refs.lakesList.toggleRowSelection(this.checked,true)
            this.$refs.reservoirList.toggleRowSelection(this.checked,true)
        }

    },

    created(){
        this.getRiverList()
        this.getLakesList()
        this.getReservoirList()
        this.initTab()
    },
   
}
</script>
<style lang="scss" scoped>
/deep/.el-tabs{
    .el-tabs__item{
        border-right: none !important;
    }
    .el-tabs__nav-wrap::after{
        background-color: #1a3d6b;
    }
}

.button-bar{
    text-align:center;
}

/deep/ .el-dialog{
    display: flex;
    flex-direction: column;
    .el-dialog__body{
        flex:1;
        overflow: auto;
        padding-top:0px;
    }
}


</style>


